<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的显示与隐藏</title>
    <style>
        /* display:block; 有两层意思
        1.转化为块级元素
        2.显示元素 
        不仅隐藏了元素，而且不再占有原来的位置*/
        /* visibility
        隐藏了元素，但是仍然占有原来的位置，原来的位置不会被其他元素占用 */
        /* overflow
        对溢出的元素进行处理 
        默认对应  把内容显示出来*/
        .peiqi {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* display: none; */
            /* 不但隐藏了元素，而且不在占有原来的位置。 */
            /* 只是隐藏了元素，并没有删除元素。检查的时候任然存在可以显示出来 */
            /* display: block; */
            /* visibility: hidden; */
            /* 对元素进行隐藏，并且保留原来的位置。 */
            /* visibility: visible; */
        }

        .qiaozhi {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .yichu {
            height: 100px;
            width: 100px;
            background-color: antiquewhite;
            /* overflow: visible; */
            /*  对溢出的元素进行显示*/
            /* overflow:scroll ; */
            /* 显示滚动条 溢不溢出都显示*/
            overflow: auto;
            /* 需要的时候添加滚动条 
            超出盒子大小显示滚动条，没有超出的时候不显示*/
        }

        /* 注意：对带有定位的盒子慎用，可能会剪切掉多余的部分 */
    </style>
</head>

<body>
    <div class="peiqi">peiqi</div>
    <div class="qiaozhi">qiaozhi</div>
    <div class="yichu">xiaobdiac侧墙比蹙额求偶场去参加哦i和全欧班成员共七英寸超轻薄iu成功哟啊
        擦灰产品策划传入日本v也高于安徽对宠物揣测有人玩过v哦哟成为hi欧冠微软因此u我i如何让扶额</div>
</body>

</html>